<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-select v-model="formItem.s_operation" class="select_input" clearable placeholder="请选择日志类别" @change="search">
          <el-option v-for="(item) in operations" :key="item.code" :label="item.text" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formItem.s_kw"
          clearable
          placeholder="请输入关键字..."
          size="mini"
          @keyup.enter.native="search"
          @change="onGlobeSearchInputChange"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          value-format="timestamp"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import { deepClone } from '@neu/biz-core/utils'
// 定义一个查询表单原始项
const formItem = {
  s_app: '',
  s_operation: '',
  s_kw: ''
}

export default {
  name: 'LogsTableFilter',
  data() {
    return {
      formItem: {
        ...formItem
      },
      operations: [],
      timeRange: null
    }
  },
  computed: {

  },
  created() {
    // logs operation dictionary
    findByDictionaryType('operations').then(response => {
      this.operations = response.data
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      const params = deepClone(this.formItem)

      if (this.timeRange) {
        params.s_startTime = this.timeRange[0]
        params.s_endTime = this.timeRange[1]
      }
      this.$parent.filter(params)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.search()
      }
    }
  }
}
</script>
